<template>
  <div class="syclass">
    <div class="head-swipe">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="@/assets/imgs/hearder.png" alt="" />
          </div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Swiper from "swiper";
import { Pagination } from "swiper/modules"; // 导入分页模块
import { Autoplay } from "swiper/modules"; // 导入自动滚动模块
import "swiper/css";
import "swiper/css/pagination";

const mySwiperFn = () => {
  // 初始化 Swiper 实例
  new Swiper(".swiper-container", {
    loop: false, // 无缝 ，是否循环展示
    // slidesPerview: "auto",
    // slidesPerGroup: 1, // 一次滚动多少组
    // loopedSlides: 6, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
    // 自动播放
    // autoplay: {
    //   delay: 2000, // 每个图片移动完成后间隔
    //   disableOnInteraction: false, // 触摸后是否停止自动移动
    //   pauseOnMouseEnter: true, //鼠标进入，停止滚动
    // },

    resistanceRatio: 0,
    // speed: 3000, // 自动轮播多少时间一张
    // autoplayDisableOnInteraction: false, //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    // preventLinksPropagation: false, //阻止click冒泡。拖动Swiper时阻止click事件
    // lazyLoading: true,
    // loadPrevNext: true, //允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）
    // loadPrevNextAmount: 2, //设置在延迟加载图片时提前多少个slide。个数不可少于slidesPerView的数量。默认为1，提前1个slide加载图片，例如切换到第三个slide时加载第四个slide里面的图片。

    // initialSlide: 1, //设定初始化时slide的索引。Swiper默认初始化时显示第一个索引0
    // paginationClickable: true,
    slidesPerView: 1, // 一组三个，设置slider容器能够同时显示的slides数量 > 1
    spaceBetween: 0, // 调整项目之间的间距，根据需要调整
    centeredSlides: true,
    // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
      dynamicMainBullets: 1, //动态分页器的主指示点的数量
    },
    // 使用的模块
    modules: [Pagination, Autoplay],
  });
};

onMounted(() => {
  mySwiperFn();
});
</script>
<style scoped lang="less">
.syclass {
  font-size: 16px;
  height: 500px;
  width: 100%;
}
.head-swipe {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;

  .swiper-container {
    width: 100%;
    height: 500px;
    position: relative;
    .swiper-wrapper {
      display: flex;
      width: 100%;
      height: 500px;
      flex-shrink: 0;
      .swiper-slide {
        background: #817979;
        width: 100%;
        flex-shrink: 0;
        transition: transform 0.2s linear;
      }
    }
  }
}
</style>
